<template>
  <!-- 平台服务费 -->
  <el-dialog
    v-model="dialogVisible"
    title="货物状态"
    width="75%"
    :before-close="handleClose"
  >
    <div v-loading="loading">
      <el-tabs
        v-model="activeTabs"
        type="card"
        v-if="ruleForm.orderDeliveryList"
      >
        <el-tab-pane
          :label="`货物 ${index + 1}`"
          v-for="(item, index) in ruleForm.orderDeliveryList"
          :key="index"
          :name="index"
        >
          <div class="goods-tabs">
            <c-deliver-goods :modelValue="item" :form="ruleForm" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <el-button size="large" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import cDeliverGoods from "./DeliverGoods.vue";
import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { deepClone } from "@/utils/index.js";
const activeTabs = ref(0);
const dialogVisible = ref(false);
const loading = ref(false);
const ruleForm = ref({});
const handleOpen = async (item) => {
  loading.value = true;
  dialogVisible.value = true;
  try {
    const url = "/buyerOrderList/getSellerOrderById";
    const params = {
      id: item.id,
    };
    const res = await proxy.$get({ url, params });
    ruleForm.value = deepClone(res);
    loading.value = false;
  } catch (error) {
    console.log(error);
    loading.value = false;
  }
};
const handleClose = () => {
  dialogVisible.value = false;
};
defineExpose({
  handleOpen,
});
</script>
<style lang="less" scoped>
.goods-tabs {
  border-bottom: 1px solid #e9e9e9;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  min-height: 50px;
}
:deep(.el-tabs__header) {
  margin: 0 !important;
}
</style>
